<template>
  <div class="app-container clearfix">  
    <el-row>
    <el-col :span="5" style="background:#fff;">
      <div>
      <el-button type="success" @click="handleBackButton()">返回</el-button>
        </div>
      <el-avatar shape="square" size="large" :src="channelData.channelLogo"></el-avatar>
      <h2>{{channelData.channelName}}</h2>
      <div>
      {{channelData.createdAt}}
        </div>
      <div>
      {{channelData.updatedAt}}
        </div>
      <div>
      {{channelData.documentNum}}
        </div>
      <div>
      {{channelData.remark}}
        </div>
      <div>
      {{channelData.channelCode}}
        </div>
      <div>
      {{channelData.accountNum}}
        </div>
      <div>
      {{channelData.removedTime}}
        </div>
      
    </el-col>
    <el-col :span="15" style="padding:25px;">
       <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="概述" name="dashboard">概述</el-tab-pane>
        <el-tab-pane label="文章管理" name="first">文章管理</el-tab-pane>
        <el-tab-pane label="曝光管理" name="second">曝光管理</el-tab-pane>
      </el-tabs>
      3
       <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic
            group-separator=","
            :precision="2"
            :value="value2"
            :title="title"
          ></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="男女比">
            <template slot="formatter">
              456/2
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            group-separator=","
            :precision="2"
            decimal-separator="."
            :value="value1"
            :title="title"
          >
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="like ? 521 : 520" title="Feedback">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    </el-col>
    <el-col :span="4" style="background:#fff;">
      d
    </el-col>
  </el-row>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getChannelDetail} from '@/api/marketing/channel'



export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
       like: true,
        value1: 4154.564,
        value2: 1314,
        title: "增长人数",
      channelData: {
      }
    }
  },
  created() {
    let channelID = this.$route.query.channelID 
    channelID = parseInt(channelID)
    if(isNaN(channelID) == false){
    }
    this.channelID = channelID
    this.getInfo()
  },
  methods: {
    handleBackButton:function(){
        this.$router.push({ path: 'channel'})
    },
    getInfo:function(){
      let _this = this;
      getChannelDetail({
        "channelID":this.channelID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            this.channelData = response.data
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>

</style>